<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="easyui-panel" style="padding:5px" data-options="fit:true,fitColumns:true">
	<!-- ------------------------------------------------------grid------------------------------------------------------ -->
	<table id="size_dg" >
		<thead>
			<tr>
				<th data-options="field:'logo',width:100">品牌</th>
				<th data-options="field:'sex',width:100" formatter="format">性别</th>
				<th data-options="field:'french_size',width:100">法国码</th>
				<th data-options="field:'china_size',width:100">中国码</th>
				<th data-options="field:'size',width:100">脚长</th>
				<th data-options="field:'style',width:100">风格</th>
				<th data-options="field:'logo_id',hidden:true"></th>
				<th data-options="field:'id',hidden:true"></th>
			</tr>
		</thead>
	</table>
	<!-- ------------------------------------------------------grid工具栏------------------------------------------------------ -->
	<div id="size_tb" >
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td style="padding-left: 2px">
					<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add_size();">添加</a> 
					<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit_size();">编辑</a> 
					<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del_size();">删除</a>
				</td>
			</tr>
		</table>
		
	</div>
</div>
<!-- ------------------------------------------------------弹窗------------------------------------------------------ -->
<div id="size_dlg" class="easyui-dialog" title="尺码编辑" style="width:400px;height:330px;padding:10px"
		data-options="
			modal:true,
			closed:true,
			iconCls: 'icon-save',
			buttons: [{
				text:'Ok',
				iconCls:'icon-ok',
				handler:function(){
					submit_size();
				}
			},{
				text:'Cancel',
				handler:function(){
					$('#size_dlg').dialog('close');
				}
			}]
		">
	<div style="padding:10px 60px 20px 60px">	
	<form id="size_form" method="post">
		<input name="size.id" id="id" type="hidden"/>
    	<table cellpadding="5">
    		<tr>
    			<td>品牌:</td>
    			<td><input id="logo" name="size.logo_id" data-options="required:true"></input></td>
    		</tr>
    		<tr>
    			<td>性别:</td>
    			<td><input id="sex" name="size.sex" class="easyui-combobox" data-options="editable:false,valueField:'id',textField:'text',data:[{id:'0',text:'女'},{id:'1',text:'男'}]"></input></td>
    		</tr>
    		<tr>
    			<td>法国码:</td>
    			<td><input class="easyui-textbox" type="text" name="size.french_size"></input></td>
    		</tr>
    		<tr>
    			<td>中国码:</td>
    			<td><input class="easyui-textbox" type="text" name="size.china_size"></input></td>
    		</tr>
    		<tr>
    			<td>脚长:</td>
    			<td><input class="easyui-textbox" type="text" name="size.size"></input></td>
    		</tr>
    		<tr>
    			<td>风格:</td>
    			<td><input class="easyui-textbox" type="text" name="size.style"></input></td>
    		</tr>
    	</table>
    </form>
	</div>
</div>

<script type="text/javascript">
$(function(){
	$("#size_dg").datagrid({
		title : '尺码管理',
		url : "size/getPage",
		//iconCls : 'icon-ok',
		//width : 'auto',
		pageSize : 15,//默认选择的分页是每页5行数据
		pageList : [ 15, 20, 30, 40 ],//可以选择的分页集合
		nowrap : false,//设置为true，当数据长度超出列宽时将会自动截取
		striped : true,//设置为true将交替显示行背景。
		//collapsible : true,//显示可折叠按钮
		toolbar:"#size_tb",//在添加 增添、删除、修改操作的按钮要用到这个
		border:true,
		loadMsg : '数据装载中......',
		singleSelect:true,//为true时只能选择单行
		fit:true,
		fitColumns:true,//允许表格自动缩放，以适应父容器
		//sortName : 'xh',//当数据表格初始化时以哪一列来排序
		//sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
		//remoteSort : false,
		//frozenColumns : [ [ {
		//	field : 'ck',
		//	checkbox : true
		//} ] ], 
		pagination : true,//分页
		rownumbers : true//行数
	});	
	
	$('#logo').combobox({
	    url:'logo/getList',
	    valueField:'id',
	    textField:'name'
	});  
})

function format(value,row,index){
	if (value == "1") {
        return "男";
    }
    else {
        return "女";
    }
} 

//增加
function add_size(){
	$('#id').val('');
	$('#size_dlg').dialog('open');
}
//编辑
function edit_size(){
	var row = $("#size_dg").datagrid('getSelected');
	if (row) {
		//$('#size_form').form('load', 'size/getById&id='+row.id);
		$('#size_form').form('load', {
			'size.id' : row.id,
			'size.logo_id' : row.logo_id,
			'size.french_size' : row.french_size,
			'size.china_size' : row.china_size,
			'size.size' : row.size,
			'size.style' : row.style,
			'size.sex' : row.sex
		});
		$('#size_dlg').dialog('open');
	}else{
		parent.$.messager.show({
			title :"提示",
			msg :"请选择一行记录!",
			timeout : 1000 * 2
		});
	}
}

//删除
function del_size()
{
	var row = $("#size_dg").datagrid('getSelected');
	if(row){
		var rowIndex = $("#size_dg").datagrid('getRowIndex', row);
		parent.$.messager.confirm("提示","确定要删除记录吗?",function(r){  
		    if (r){  
		    	$("#size_dg").datagrid('deleteRow', rowIndex);
				$.ajax({
					url:"size/delete",
					data: "id="+row.id,
					success: function(rsp){
						parent.$.messager.show({
							title : rsp.title,
							msg : rsp.message,
							timeout : 1000 * 2
						});
					}
				});
		    }  
		});
	}else{
		parent.$.messager.show({
			title : "提示",
			msg :"请选择一行记录!",
			timeout : 1000 * 2
		});
	}
}


//form提交
function submit_size()
{
	$('#size_form').form('submit', {
		url :'size/submit',
		onSubmit : function() {
			parent.$.messager.progress({
				title : '提示',
				text : '数据处理中，请稍后....'
			});
			var isValid = $(this).form("validate");
			if (!isValid) {
				parent.$.messager.progress("close");
			}
			if(isValid){
				return true;
			}else{
				return false;
			}
		},
		success : function(result) {
			$('#size_dg').datagrid('reload');
			parent.$.messager.progress('close');
			$('#size_dlg').dialog('close');
		}
	});
	

}


</script>

</body>
</html>